<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            display: inline-block;
        }
    </style>
</head>

<body>
    <!-- ## 4.数码时钟

-   根据定时器动态改变img 的src的路径
-   img.src = '' -->


    <div id="img1"></div>

    <div id="img2"></div>

    <div id="img3"></div>





    <script>
        let f1 = () => {
            let date = new Date();
            // let date1 = date.getDate();

            let h = date.getHours();
            let m = date.getMinutes();
            let s = date.getSeconds();

            if (m <= 0) {
                m = "0" + m
            }

            if (s >= 10) {

            } else {
                s = "0" + s
            }
            return [h, m, s]
        }
        let f2 = (i, n, ll) => {
            // for()
            let a = parseInt(i / 10);
            let b = parseInt(i % 10);
            // console.log(a + "   " + b)
            n.innerHTML = ` <img src="../images/` + a + `.png" alt=""><img src="../images/` + b + `.png" alt="">` + ll
        }
        setInterval(() => {
            let mm = f1()
            f2(mm[0], img1, "时") + f2(mm[1], img2, "分") + f2(mm[2], img3, "秒")
        }, 1000)




    </script>

</body>

</html>